import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Space, Button, Radio, message, Row, Col, Flex, Select } from 'antd';
const { TextArea } = Input;
import { OPERATE_ADD, OPERATE_EDIT, TREE_ROOT, STATUS_ENABLED, STATUS_DISABLED, SELECT_LABEL, SELECT_VALUE } from '../../../constants/index'
import { useIntl } from 'umi'
import { createDictType, queryDictTypeEnableList, updateDictType } from '../../../services/dictType/index'
const DictTypeOperatePanel = ({ operateType, nodeDate, closePanel ,initDictType}) => {
    const intl = useIntl();
    const [form] = Form.useForm();
    const [formData,setFormData] = useState(nodeDate);
    const [open, setOpen] = useState(true);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [dictTypeEnableList, setDictTypeEnableList] = useState();
    const [dictTypeSelectLoading, setDictTypeSelectLoading] = useState(true);
    useEffect(() => {
        initDictTypeList()
    }, [])
    let initDictTypeList = async () => {
        await queryDictTypeEnableList().then(res => {
            if (res.success) {
                setDictTypeEnableList(res.data)
                setDictTypeSelectLoading(false)
            }
        }).catch(err => {
            setDictTypeSelectLoading(false)
        })
    }
    let onChange = (e)=>{
        setFormData({...formData,statusFlag:e.target.value})
    }
    const handleOk = async (form) => {
        form.unCode = formData.unCode
        if (operateType === OPERATE_ADD) {
            setConfirmLoading(true);
            await createDictType(form).then(res => {
                if (res.success) {
                    message.success(res.msg)
                    setConfirmLoading(false)
                    handleCancel()
                } else {
                    setConfirmLoading(false)
                }
            }).catch(err => {
                console.log(err);
                setConfirmLoading(false)
            })
        } else {
            setConfirmLoading(true);
            await updateDictType(form).then(res => {
                if (res.success) {
                    message.success(res.msg)
                    setConfirmLoading(false)
                    handleCancel()
                } else {
                    setConfirmLoading(false)
                }
            }).catch(err => {
                console.log(err);
                setConfirmLoading(false)
            })
        }
    };

    const handleCancel = () => {
        setOpen(false);
        initDictType()
    };
    return (
        <>
            <Modal
                title={operateType === OPERATE_ADD ? "新增字典类型" : "编辑字典类型"}
                open={open}
                destroyOnClose={true}
                confirmLoading={confirmLoading}
                onCancel={handleCancel}
                afterClose={closePanel}
                centered={true}
                footer={false}
            >
                <Form
                    name={form}
                    style={{
                        maxWidth: 600
                    }}
                    onFinish={handleOk}
                    labelCol={{ span: 7 }}
                    wrapperCol={{ span: 17 }}
                    initialValues={operateType === OPERATE_ADD ? { parentUnCode: formData.unCode , statusFlag: STATUS_ENABLED } : formData}
                    autoComplete="on"
                >
                    <Form.Item
                        label={intl.formatMessage({
                            id: 'component.tree.parent',
                            defaultMessage: '上一级'
                        })}
                        name="parentUnCode"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Select
                            loading={dictTypeSelectLoading}
                            disabled
                            fieldNames={{ label: SELECT_LABEL, value: SELECT_VALUE }}
                            options={dictTypeEnableList}
                        />
                    </Form.Item>
                    <Form.Item
                        label={intl.formatMessage({
                            id: 'app.dictType.form.lable.name',
                            defaultMessage: '字典类型名称'
                        })}
                        name="name"
                        rules={[
                            {
                                required: true,
                                message: intl.formatMessage({
                                    id: 'app.dictType.form.rule.message.name',
                                    defaultMessage: '请输入字典类型名称'
                                }),
                            },
                        ]}
                    >
                        <Input placeholder={intl.formatMessage({
                            id: 'app.dictType.form.placeholder.name',
                            defaultMessage: '请输入字典类型名称'
                        })} />
                    </Form.Item>

                    <Form.Item
                        label={intl.formatMessage({
                            id: 'app.dictType.form.lable.type',
                            defaultMessage: '字典类型Type'
                        })}
                        name="type"
                        rules={[
                            {
                                required: true,
                                message: intl.formatMessage({
                                    id: 'app.dictType.form.rule.message.type',
                                    defaultMessage: '请输入字典类型Type'
                                }),
                            },
                        ]}
                    >
                        <Input placeholder={intl.formatMessage({
                            id: 'app.dictType.form.placeholder.type',
                            defaultMessage: '请输入字典类型(英语单词)'
                        })} />
                    </Form.Item>
                    <Form.Item
                        label={intl.formatMessage({
                            id: 'app.dictType.form.lable.statusFlag',
                            defaultMessage: '启用状态'
                        })}
                        name="statusFlag"
                        rules={[
                            {
                                required: true,
                                message: intl.formatMessage({
                                    id: 'app.dictType.form.rule.message.statusFlag',
                                    defaultMessage: '请选择启用状态'
                                }),
                            },
                        ]}
                    >
                        <Flex>
                            <Radio.Group onChange={onChange} value={formData.statusFlag}>
                                <Radio value={STATUS_ENABLED}>{intl.formatMessage({
                                    id: 'component.radio.status.enabled',
                                    defaultMessage: '启用'
                                })}</Radio>
                                <Radio value={STATUS_DISABLED}>{intl.formatMessage({
                                    id: 'component.radio.status.disabled',
                                    defaultMessage: '禁用'
                                })}</Radio>
                            </Radio.Group>
                        </Flex>
                    </Form.Item>
                    <Form.Item
                        label={intl.formatMessage({
                            id: 'app.dictType.form.lable.remark',
                            defaultMessage: '备注'
                        })}
                        name="remark"
                    >
                        <TextArea
                            showCount
                            row={4}
                            maxLength={255}
                            placeholder={intl.formatMessage({
                                id: 'app.dictType.form.placeholder.remark',
                                defaultMessage: '请输入备注'
                            })}
                        />
                    </Form.Item>
                    <Row justify="end">
                        <Col>
                            <Space>
                                <Button htmlType="button" onClick={handleCancel}>
                                    {intl.formatMessage({
                                        id: 'component.button.cancel',
                                    })}
                                </Button>
                                <Button type="primary" htmlType="submit">
                                    {intl.formatMessage({
                                        id: 'component.button.submit',
                                    })}
                                </Button>
                            </Space>
                        </Col>
                    </Row>
                </Form>
            </Modal>
        </>
    );
};
export default DictTypeOperatePanel;